<template>
  <el-form class="headform" label-position="right" :inline="true" v-model="searchForm" label-width="auto">
    <el-row>
      <el-col :span="8">
        <el-form-item label="简称">
          <el-input v-model="searchForm.easyName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="客户名称">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8" class="button">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="addNew">新建</el-button>
        <el-button type="primary" @click="exportList">导出</el-button>
      </el-col>
    </el-row>
  </el-form>
  <el-table :data="tableData" style="width: 100%;" ref="table" @selection-change="handleSelectionChange"
    table-layout="auto" row-key="getRowKeys">
    <el-table-column prop="easyName" label="简称" align="center"></el-table-column>
    <el-table-column prop="taxIdentificationNumber" label="纳税识别号" align="center"></el-table-column>
    <el-table-column prop="name" label="客户名称" align="center"></el-table-column>
    <el-table-column prop="address" label="地址" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row)" link size="small">查看</el-button>
        <el-button type="primary" @click="edit(scope.row)" link size="small">修改</el-button>
        <el-button type="primary" @click="del(scope.row)" link size="small">删除</el-button>

      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15]"
    :small="small" :disabled="disabled" :background="background" layout="total, prev, pager, next, sizes, jumper"
    :total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  <el-dialog v-model="dialogVisible" title="客户管理" width="30%" :before-close="handleClose" :close-on-click-modal="false">
    <el-form label-position="right" label-width="auto">
      <el-form-item label="简称">
        <el-input v-model="customer.easyName" :readonly="operation == 2"></el-input>
      </el-form-item>
      <el-form-item label="纳税识别号">
        <el-input v-model="customer.taxIdentificationNumber" :readonly="operation == 2"></el-input>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input type="textarea" v-model="customer.name" :readonly="operation == 2"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input type="textarea" v-model="customer.address" :readonly="operation == 2"></el-input>
      </el-form-item>
      <el-form-item label="银行">
        <el-input type="textarea" v-model="customer.bankAccountType" :readonly="operation == 2"></el-input>
      </el-form-item>
      <el-form-item label="银行地址">
        <el-input type="textarea" v-model="customer.bankInfo" :readonly="operation == 2"></el-input>
      </el-form-item>
      <el-form-item label="付款条款">
        <el-input type="textarea" v-model="customer.paymentMethod" :readonly="operation == 2"></el-input>
      </el-form-item>
      <div class="footer">
        <el-button @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, inject, onMounted, provide, defineEmits } from 'vue'
import { customerList, saveCustomer, delBatch, exportcustomer } from '@/utils/invoice';
import { useRouter } from "vue-router";
import { useStore } from '@/stores/counter'
const use_store = useStore()
const router = useRouter();
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const totalPage = ref(0)
const tableData = ref([])
const dialogVisible = ref(false)
const operation = ref()
const searchForm = ref({
  easyName: '',
  name: ''
})
const customer = ref({
  name: '',
  address: '',
  easyName: '',
  taxIdentificationNumber: '',
  bankAccountType: '',
  bankInfo: ''
})

onMounted(() => {
  search()
})

function search() {
  customerList(searchForm.value, currentPage4.value, pageSize4.value).then(res => {
    tableData.value = res.data.records
    totalPage.value = res.data.total
  })
}

function handleSizeChange() {
  search()
}

function handleCurrentChange() {
  search()
}

function addNew() {
  operation.value = 1
  dialogVisible.value = true
}

function view(row) {
  customer.value = JSON.parse(JSON.stringify(row))
  operation.value = 2
  dialogVisible.value = true
}

function edit(row) {
  customer.value = JSON.parse(JSON.stringify(row))
  operation.value = 1
  dialogVisible.value = true
}

function confirm() {
  saveCustomer(customer.value).then(res => {
    cancel()
    search()
  })
}

function del(row) {
  delBatch([row.id]).then(res => {
    search()
  })
}

function cancel() {
  customer.value.name = ""
  customer.value.address = ""
  customer.value.easyName = ""
  customer.value.taxIdentificationNumber = ""
  dialogVisible.value = false
}

function exportList() {
  exportcustomer(searchForm.value, currentPage4.value, pageSize4.value).then(data => {
    const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
    const date = new Date().toLocaleDateString()
    const link = document.createElement('a')
    link.href = url
    let attributeValue = `客户管理${date}-报表记录.xlsx`
    link.setAttribute('download', attributeValue)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}
</script>
<style lang="scss">
.el-col {
  padding-right: 20px;

  .el-form-item {
    width: 100%;
    margin-right: 20px;
  }
}

.button {
  padding-right: 60px;

  .el-button {
    float: right;
    margin-left: 20px;
  }
}

.el-pagination {
  margin-top: 10px;
  float: right;
}

.footer {
  text-align: center;
}
</style>